<template>
  <scroll class="suggest" :data="dataLIst" :pullup="pullup" :beforescroll="beforescroll" ref="suggest" @scrollToEnd="searchMore"
    @beforScroll="changeScroll">
    <ul class="suggest-list">
      <li class="suggest-item" v-for="(item,index) in dataLIst" :key="index" @click="selectItem(item)">
        <div class="icon">
          <i :class="countIcon(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="countName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore" title=""></loading>
    </ul>
    <div class="no-result-wrapper">
      <no-result v-show="noResult" title="暂无数据"></no-result>
    </div>
  </scroll>
</template>

<script>
  import {
    getSearchVal
  } from 'api/search';
  import Scroll from 'base/scroll/scroll';
  import Loading from 'base/loading/loading';
  import {
    Singer,
    // musicInfo
  } from 'common/js/singer';
  import {
    mapMutations,
    mapActions
  } from "vuex";
  import NoResult from 'base/no-result';
  import {createSong} from 'common/js/song';

  const SINGER_TYPE = 'singer'
  const SET_PAGE = 20;

  export default {
    name: 'Sugest',
    computed: {
      noResult() {
        return !this.hasMore && !this.dataLIst
      }
    },
    components: {
      Scroll,
      Loading,
      NoResult
    },
    props: {
      query: {
        type: String,
        default: ''
      },
      showSinger: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        page: 1,
        dataLIst: [],
        pullup: true,
        hasMore: true,
        beforescroll: true
      }
    },
    watch: {
      query() {
        this.getData()
      }
    },
    methods: {
      getData() {
        this.hasMore = true
        this.page = 1
        this.$refs.suggest.scrollTo(0, 0)

        getSearchVal(this.query, this.page, this.showSinger, SET_PAGE).then((res) => {
          if (res.code == 0) {
            this.dataLIst = this._countData(res.data)
            this.setHasMore(res.data)
          }
        })
      },
      //下拉加载
      searchMore() {
        if (!this.hasMore) {
          return
        }
        this.page++;
        getSearchVal(this.query, this.page, this.showSinger, SET_PAGE).then((res) => {
          if (res.code == 0) {
            this.dataLIst = this.dataLIst.concat(this._countData(res.data))
            this.setHasMore(res.data)
          }
        })
      },
      // 计算图标
      countIcon(item) {
        if (item.singerType == SINGER_TYPE) {
          return 'icon-mine'
        } else {
          return 'icon-music'
        }
      },
      // 计算名字
      countName(item) {
        if (item.singerType == SINGER_TYPE) {
          return item.singername
        } else {
          return `${item.songname}-${item.singer["0"].name}`
        }
      },
      //计算是否超过总数
      setHasMore(item) {
        if (!item.song.list || item.song.curpage * SET_PAGE >= item.song.totalnum) {
          this.hasMore = false
        }
      },
      //点击跳转
      selectItem(item) {
        if (item.singerType == SINGER_TYPE) {
          const val = new Singer({
            id: item.singerid,
            mid: item.singermid,
            name: item.singername
          })
          this.setSinger(val)
          this.$router.push({
            path: `/search/${item.singerid}`
          })
        } else {
          // console.log(createSong(item))
          this.insertSong(createSong(item))
          // this.insertSong(musicInfo(item))
        }
        this.$emit('select')
      },
      // 开始滚动传递出去
      changeScroll() {
        this.$emit('changeScroll')
      },
      refresh() {
        this.$refs.suggest.refresh()
      },
      _countData(data) {
        let arr = [];
        if (data.zhida && data.zhida.singerid) {
          arr.push({ ...data.zhida,
            ...{
              singerType: SINGER_TYPE
            }
          })
        }
        if (data.song) {
          arr = arr.concat(data.song.list)
        }
        return arr
      },
      ...mapMutations({
        setSinger: "SET_SINGER"
      }),
      ...mapActions(['insertSong'])
    }
  }

</script>
